import React, { Component } from 'react';
import {connect} from "dva"
import { Form, Table, Button, Select, Tag } from 'antd';
const { Option } = Select
const mapStateToProps = (state) => state.questions
@connect(mapStateToProps)
class QuestionList extends Component {
    state = {
        loading: true
    }
    componentDidMount () {
        this.fetchQuestions()
    }
     
    fetchQuestions = (payload = {}) => {
        console.log(payload)
        this.setState({
          loading: true
        }, () => {
          this.props.dispatch({
            type: 'questions/fetchQuestions',
            payload
          }).then(() => {
            this.setState({
              loading: false
            })
          })
        })
      }

      get tableColumns () {
        return [
          {
            title: '标题',
            dataIndex: 'title',
            key: 'title',
            render: text => <a>{text}</a>,
          },
          {
            title: '标签',
            dataIndex: 'exam_name',
            key: 'exam_name',
            render: (text, record, index) => {
              return (
                <React.Fragment>
                  <Tag key={record.exam_id}>{text}</Tag>
                  <Tag key={record.questions_type_id}>{record.questions_type_text}</Tag>
                  <Tag key={record.subject_id}>{record.subject_text}</Tag>
                </React.Fragment>
              )
            }
          },
          {
            title: '发布人',
            dataIndex: 'user_name',
            key: 'user_name',
          },
          {
            title: '操作',
            dataIndex: 'address',
            key: 'address',
            render: (text, record, index) => {
              return (
                <React.Fragment>
                  <a style={{ marginRight: 16 }}>删除</a>
    
                  <a style={{ marginRight: 16 }}>编辑</a>
                </React.Fragment>
              )
            }
          },
        ]
      }

    render() {
        const {
            questionsType, // 试题类型
            subject, // 所有课程
            examType, // 考试类型
            questionsList
          } = this.props
        return (
            <div>
                <div class="filter-bar">
                <Form
                    layout="inline" 
                    initialValues={{
                    questions_type_id: '',
                    subject_id: '',
                    exam_id: ''
                    }}
                    onFinish={this.fetchQuestions}
                >
                    <Form.Item label="试题类型" name="questions_type_id">
                    <Select style={{ width: 120 }}>
                        <Option value="" checked key={1}>全部</Option>
                            {
                              questionsType.map(item => <Option value={item.questions_type_id} key={item.questions_type_id}>{item.questions_type_text}</Option>)
                            }
                    </Select>
                    </Form.Item>
                    <Form.Item label="试题课程" name="subject_id">
                    <Select style={{ width: 120 }}>
                        <Option value="" key={1}>全部</Option>
                            {
                             subject.map(item => <Option value={item.subject_id} key={item.subject_id}>{item.subject_text}</Option>)
                            }
                    </Select>
                    </Form.Item>
                    <Form.Item label="考试类型" name="exam_id">
                    <Select style={{ width: 120 }}>
                        <Option value="" key={1}>全部</Option>
                            {
                              examType.map(item => <Option value={item.exam_id} key={item.exam_id}>{item.exam_name}</Option>)
                            }
                    </Select>
                    </Form.Item>
                    <Form.Item>
                    <Button type="primary" htmlType="submit">查询</Button>
                    </Form.Item>
                </Form>
                </div>
                <div class="table-content">
                <Table loading={this.state.loading} columns={this.tableColumns} dataSource={questionsList.data} />
                </div>
            </div>
        );
    }
}

export default QuestionList;
